<template>
  <!-- 湖南征信认证家服公司 -->
  <div class="company-item" @click="$router.push(`/companypage/${company.id}`)">
    <van-row type="flex" class="company-item-head">
      <van-col span="6">
        <van-image width="100" height="100" :src="company.img" />
      </van-col>
      <van-col span="18">
        <van-cell
          :border="false"
          :title="company.name"
          size="large"
          :label="company.info"
        />
        <div class="tags">
          <van-tag
            v-for="(tag, index) in company.tags"
            :key="index"
            plain
            round
            type="primary"
            >{{ tag }}</van-tag
          >
        </div>
      </van-col>
    </van-row>
    <van-cell
      :title="company.distance"
      :value="company.address"
      icon="location-o"
      class="distance"
    />
  </div>
</template>
<script>
export default {
  name: 'CompanyItem',
  components: {},
  props: {
    company: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {}
}
</script>
<style lang="less" scoped>
.company-item {
  background-color: #fff;
  border-bottom: 1px solid #f5f7f9;
  .company-item-head {
    .van-image {
      box-sizing: border-box;
      padding: 20px;
    }
    .van-row {
      .van-cell {
        padding: 0;
        border: none;
      }
    }
  }
  .tags {
    padding: 0 0.42667rem;
    .van-tag {
      padding: 10px 20px;
      margin-right: 15px;
    }
  }

  .distance {
    .van-cell__title {
      width: 100px;
      flex: none;
    }
    .van-cell__value {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 12px;
      margin-left: 17px;
    }
  }
}
</style>
